<template>
  <div style="border-bottom: 1px solid #ccc;line-height: 60px;display: flex;">
    <div style="flex: 1;">
      <span :class="collapseBtnClass" style="cursor: pointer;font-size: 19px" @click="collapse"></span>

      <el-breadcrumb separator="/" style="display: inline-block; margin-left: 10px">
        <el-breadcrumb-item :to="'/'">首页</el-breadcrumb-item>
        <el-breadcrumb-item>{{ currentPathName }}</el-breadcrumb-item>
      </el-breadcrumb>
    </div>

    <el-dropdown style="width: 130px;cursor: pointer">
      <div style="display: inline-block">
        <div v-if="user.avatarUrl" class="header">
          <el-avatar :src="user.avatarUrl"></el-avatar>
        </div>
        <div v-else class="header">
          <el-avatar> {{ user.userName }} </el-avatar>
        </div>
        <span>{{user.nickName}}</span><i class="el-icon-arrow-down" style="margin-left:5px"></i>
      </div>
      <el-dropdown-menu slot="dropdown">
        <el-dropdown-item>
          <router-link to="/person">个人信息</router-link>
        </el-dropdown-item>
        <el-dropdown-item>
          <router-link to="/Password">修改密码</router-link>
        </el-dropdown-item>
        <el-dropdown-item>
          <router-link to="/front/home">查看前台</router-link>
        </el-dropdown-item>
        <el-dropdown-item>
          <span style="text-decoration: none;color: #29A8EFFF;width: 100%;height: 100%" @click="exit">退出</span>
        </el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>
  </div>
</template>

<script>
export default {
  name: "Header",
  props:{
    collapseBtnClass: String,
    collapse: Function,
    user: Object
  },
  data(){
    return{
      paths:[],
      // user: localStorage.getItem("user") ? JSON.parse(localStorage.getItem("user")) : {}
    }
  },
  computed: {
    currentPathName () {
      return this.$store.state.currentPathName;　　//需要监听的数据
    }
  },
  watch:{
    currentPathName(newVal,oldVal){
      console.log(newVal)
    }
  },
  methods:{
    exit(){
      this.$store.commit("resetSys")
      this.$message.success("退出成功")
    },
    logout(){
      this.$store.commit("resetSys")
    }
  },
  mounted(){
    if (this.user.nickName){
      for(var i=0;i<this.user.nickName.length;i++){//平台显示长度截取
        if(this.user.nickName.length>3){
          this.user.nickName=this.user.nickName.slice(0,3)+"..."
        }
      }
    }
  }

}
</script>

<style scoped>
.router-link-active {
  text-decoration: none;
  color: #494545;
}
a{
  text-decoration: none;
  color: #29A8EFFF;
}
.header{
  display: inline-block;
  margin-right: 10px;
  line-height: 60px;
  position: relative;
  top: 10px;
}
</style>